// src/pages/article/widgets/collect/index.tsx
import styles from "@pages/article/styles/styles.module.less";
import GeekIcon from "@shared/geekIcon";
import React from "react";
import { useCollectArticleMutation, useUnCollectArticleMutation } from "@service/article";

interface Props {
  // 文章id
  id: string|undefined;
  // 文章是否收藏
  isCollect: boolean|undefined;
}

export default function Collect({ id, isCollect }: Props) {
  // 收藏
  const [collectArticle] = useCollectArticleMutation();
  // 取消收藏
  const [unCollectArticle] = useUnCollectArticleMutation();
  // 收藏、取消收藏文章
  const onCollectClick = () => {
    // 收藏、取消收藏
    isCollect ? unCollectArticle(id) : collectArticle(id);
  };
  return (
    <div className={styles.item} onClick={onCollectClick}>
      <GeekIcon type={isCollect ? "iconbtn_collect_sel" : "iconbtn_collect"} />
      <span>收藏</span>
    </div>
  );
}